<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>创建事件</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6b6c1a67eaa7db1ca6d6da28e590e343"></script>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"><!--公用css-->
    <link rel="stylesheet" href="css/common.css"/><!--公用css-->
    <link href="css/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"><!--点击弹窗日历css-->
    <link href="css/bootstrap/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" href="css/create_invitation.css"/>
</head>

<body>

<div class="i-box">
    <!--顶部导航 start-->
    <div class="i-date-top">
        <div class="i-date-top-back" >
            <a href="index.html"><img src="img/left_white_arrow.png"></a>
        </div>
        <div class="i-date-top-font">
            创建事件
        </div>
        <div id="share" class="dropdown share">
            <img id="share-other" class="btn dropdown-toggle test" data-toggle="dropdown" src="img/my_invitation_more.png">
            <ul id="all-share"  class="dropdown-menu share-open" aria-labelledby="share-other" >
                <div id="asdf">
                    <li role="presentation" class="share-i" id="share-tip">
                        <a role="menuitem">
                            <img src="img/my_invitation_shareInfo.png">
                            &nbsp;&nbsp;分享
                        </a>
                    </li>
                    <li role="presentation" class="share-i" id="share-friend" style="display: none;">
                        <a href="#" role="menuitem" style="padding: 5px 2px;">
                            发送给朋友
                        </a>
                    </li>
                    <li role="presentation" class="divider share-line" style="width: 80%;margin: 10px;"></li>
                    <li role="presentation" class="share-i" id="edit-info">
                        <a  role="menuitem" href="#">
                            <img src="img/my_invitation_edit.png" >
                            &nbsp;&nbsp;编辑
                        </a>
                    </li>
                </div>

            </ul>
        </div>
    </div>
    <!--顶部导航 end-->

    <!--地图页 start-->
    <div class="map-page" style="display:none;">
        <div class="map-search-top">
            <div id="r-result" class="map-search">
                <input type="text" id="suggestId" size="20"/>
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                <button type="button" id="search-add">检&nbsp;&nbsp;索</button>
            </div>
        </div>
        <div id="allmap" style="height: 700px;"></div>

        <div class="map-btn">
            <button type="button" id="confirm">确&nbsp;&nbsp;定</button>
        </div>
    </div>
    <!--地图页 end-->
    <!--内容区域start-->
    <div id="all-content">
        <div class="invitation-content">
            <!--标题 title start-->
            <table class="invitation-info">
                <tr >
                    <td id="title" class="dropdown chose-color">
                        <button type="button" class="btn dropdown-toggle" id="title-color" data-toggle="dropdown">
                            标题
                        </button>
                        <ul  id="radio_color" class="dropdown-menu" role="menu" aria-labelledby="title-color" style="text-align: center;">

                        </ul>
                    </td>
                    <td rowspan="2" class="input-title"><input class="input-info" placeholder="请输入标题"/></td>
                </tr>
                <tr >
                    <td class="chose-color-down">
                        <img src="img/down_arrow.png"/>
                    </td>
                </tr>
            </table>
            <!--标题 end-->
            <!--第二行 受邀人start-->
            <div class="invitation-line" >
                受邀人
            </div>
            <div class="invitation-man">
                <div class="invitation-name">
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                    <div>名字 <img src="img/false.png"/></div>
                </div>
                <a href="#"><img src="img/my_date_right.png"/></a>
            </div>
            <!--第二行 受邀人end-->

            <!--第三行 时间start-->
            <div class="invitation-line">
                时间
            </div>
            <!--开始start-->
            <div class="invitation-progress" >
                <span>开始</span>
                <div class="invitation-time-class" style="width: 85%;">
                    <input size="16" type="text" value="请选择时间" readonly class="form_datetime invitation-start">
                    <p class="invitation-end">
                        <i>-</i>2017年3月23日（周四）14:10
                    </p>
                </div>
            </div>
            <!--开始end-->
            <!--时长start-->
            <div class="invitation-progress">
                <span >时长</span>
                <!--<div class='clickable'>-->
                    <!--<div class='display'>-->
                        <!--<div class="progress"></div>-->
                    <!--</div>-->
                    <!--<div class="progress invitation-progress-time">-->
                        <!--<img src="img/blue_bottom.png" /><span><i id="time">1</i>小时</span>-->
                    <!--</div>-->
                <!--</div>-->
                <div style="display: table-cell;width: 85%">
                    <!--<div id="slider-range-min"></div>-->
                    <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="24" data-slider-step="1" data-slider-value="0"/>
                </div>

            </div>
            <!--时长end-->
            <!--提醒start-->
            <div class="invitation-before">
                提前 <input type="text"/> 分钟提醒
            </div>
            <!--提醒end-->

            <!--第三行 时间end-->
            <!--第四行 地址start-->
            <div class="invitation-line">
                地址
            </div>
            <div class="invitation-add">
                <input class="input-info other-input" id="invitation-add" placeholder="请输入标题"/>
                <img id="map" src="img/address_icon.png" alt=""/>
            </div>
            <!--第四行 地址end-->
            <!--第五行 备注start-->
            <div class="invitation-line"style="width: 90px;">
                备注（选填）
            </div>
            <div style="padding: 10px;">
                <input class="input-info other-input" placeholder="请输入标题"/>
            </div>
            <!--第五行 备注end-->
        </div>
        <!--底部按钮start-->
        <div class="bottom-btn">
            <button type="button" style="width: 85%;">确&nbsp;&nbsp;定</button>
        </div>
        <!--底部按钮end-->
    </div>
    <!--内容区域end-->
</div>
<script src="js/jQuery_v3.1.1.js"></script><!--公用js-->
<script src="js/bootstrap/bootstrap.js"></script><!--公用js-->
<script src="js/jquery-scrolltofixed.js"></script><!--固定js-->
<script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker.js"></script><!--日历js-->
<script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script><!--日历js-->
<script type='text/javascript' src="js/bootstrap/bootstrap-slider.js"></script><!--时长js-->
<script src="js/common.js"></script><!--公用js-->
<script src="js/createInvitation.js"></script>
</body>
</html>